<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-playlist" v-if="topPlaylist.id" ref="topPlaylist">
      <div class="tp-wrap" @click="toPlaylist(topPlaylist.id)">
        <div class="tp-card">
          <!-- 封面 -->
          <div class="tp-img">
            <img v-lazy="$utils.genImgUrl(topPlaylist.coverImgUrl, 280)" />
          </div>
          <div class="tp-content">
            <div class="tp-tag">
              <span>精品歌单</span>
            </div>
            <!-- 标题 -->
            <p class="tp-name">{{ topPlaylist.name }}</p>
            <!-- 介绍 -->
            <p class="tp-desc">{{ topPlaylist.description }}</p>
          </div>
        </div>
        <!-- 背景 -->
        <div class="tp-background" :style="{ backgroundImage: `url(${topPlaylist.coverImgUrl})` }"></div>
        <div class="tp-background-mask"></div>
      </div>
    </div>

    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item" @click="tag = '全部'" :class="{ active: tag === '全部' }">全部</span>
        <span class="item" @click="tag = '欧美'" :class="{ active: tag === '欧美' }">欧美</span>
        <span class="item" @click="tag = '华语'" :class="{ active: tag === '华语' }">华语</span>
        <span class="item" @click="tag = '流行'" :class="{ active: tag === '流行' }">流行</span>
        <span class="item" @click="tag = '说唱'" :class="{ active: tag === '说唱' }">说唱</span>
        <span class="item" @click="tag = '摇滚'" :class="{ active: tag === '摇滚' }">摇滚</span>
        <span class="item" @click="tag = '民谣'" :class="{ active: tag === '民谣' }">民谣</span>
        <span class="item" @click="tag = '电子'" :class="{ active: tag === '电子' }">电子</span>
        <span class="item" @click="tag = '轻音乐'" :class="{ active: tag === '轻音乐' }">轻音乐</span>
        <span class="item" @click="tag = '影视原声'" :class="{ active: tag === '影视原声' }">影视原声</span>
        <span class="item" @click="tag = 'ACG'" :class="{ active: tag === 'ACG' }">ACG</span>
        <span class="item" @click="tag = '怀旧'" :class="{ active: tag === '怀旧' }">怀旧</span>
        <span class="item" @click="tag = '治愈'" :class="{ active: tag === '治愈' }">治愈</span>
        <span class="item" @click="tag = '旅行'" :class="{ active: tag === '旅行' }">旅行</span>
      </div>

      <div class="playlist-cards">
        <PlaylistCard
          :desc="`播放量：${$utils.formatNumber(item.playCount)}`"
          :id="item.id"
          :img="item.coverImgUrl"
          :name="item.name"
          v-for="(item, index) in playlists"
          :key="index"
        />
      </div>

      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="pageNum"
        :page-size="pageSize"
        class="pagination"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getTopPlaylist, getPalylist } from 'network/request'
export default {
  data() {
    return {
      // 总条数
      total: 0,
      // 页码
      pageNum: 1,
      pageSize: 50,
      tag: '全部',
      // 顶部精品歌单
      topPlaylist: {},
      // 歌单列表
      playlists: [],
    }
  },
  async created() {
    this._getTopPlaylist()
    this._getPlaylist()
  },

  methods: {
    // 页码改变事件
    handleCurrentChange(val) {
      // 保存页码
      this.pageNum = val
      this.$refs.topPlaylist.scrollIntoView({ behavior: 'smooth' })
      // 重新获取数据
      this._getPlaylist()
    },

    // 获取精品歌单
    async _getTopPlaylist() {
      const { playlists } = await getTopPlaylist({ cat: this.tag, limit: 1 })
      this.topPlaylist = playlists[0] || {}
    },

    // 获取歌单列表
    async _getPlaylist() {
      const resp = await getPalylist({
        cat: this.tag,
        limit: this.pageSize,
        total: true,
        offset: (this.pageNum - 1) * this.pageSize,
        order: 'hot',
      })
      this.playlists = resp.playlists
      this.total = resp.total
    },
    toPlaylist(id) {
      this.$router.push(`/playlist/${id}`)
    },
  },
  //　监听器
  watch: {
    tag() {
      this.pageNum = 1
      this.$nextTick(() => {
        this._getTopPlaylist()
        this._getPlaylist()
      })
    },
  },
}
</script>
<style lang='scss' scoped>
.playlists-container {
  padding: 12px;

  .top-playlist {
    margin-bottom: 16px;

    .tp-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 4px;
      cursor: pointer;

      .tp-card {
        position: relative;
        z-index: 1;
        display: flex;
        padding: 16px;

        .tp-img {
          @include img-wrap(140px);
          margin-right: 8px;
        }

        .tp-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .tp-tag {
            align-self: flex-start;
            padding: 4px 16px;
            margin-bottom: 16px;
            color: $gold;
            border: 1px solid currentColor;
            border-radius: 4px;
          }

          .tp-name {
            margin-bottom: 8px;
            font-size: $font-size-lg;
            color: $white;
          }

          .tp-desc {
            @include text-ellipsis-multi(5);
            font-size: $font-size-sm;
            color: $font-color-transparent;
          }
        }
      }

      .tp-background {
        @include abs-stretch;
        filter: blur(16px);
        z-index: 0;
      }

      .tp-background-mask {
        @include abs-stretch;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 0;
      }
    }
  }

  .tab-container {
    .tab-bar {
      display: flex;
      justify-content: flex-end;

      .item {
        padding: 12px 0;
        margin: 0 12px;
        color: var(--tab-item-color);
        font-size: 12px;
        cursor: pointer;
        &:hover {
          color: var(--tab-item-hover-color);
        }
        &.active {
          color: $theme-color;
          &:hover {
            color: $theme-color;
          }
        }
      }
    }
  }

  .playlist-cards {
    display: flex;
    flex-wrap: wrap;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 36px;
  }
}
</style>
